<template>
  <!--    弹窗-->
<!--  <el-button @click="callChildMethod">点击调用</el-button>-->
  <div>
  <el-dialog
      v-model="dialogVisible"
      title="详细地址"
      :before-close="handleClose"
      id="mapView"
  >
    <el-form-item>
      <!--        <el-input v-model="addrDetial" type="textarea" />-->
      <ShowThrPosition :customAttr="latAndLng"></ShowThrPosition>
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
  <div
      class="user-management-page"
      v-loading="loading"
      element-loading-text="拼命加载中"
  >
    <el-space wrap style="width: 100%">
      <el-input
          v-model="conditionForm.vehicleNumber"
          class="search-input"
          prefix-icon="el-icon-search"
          size="small"
          placeholder="车牌号"
          clearable
          style="width: 200px"
      ></el-input>
      <!--    conditionForm.vehicleStatus   conditionForm.vehicleNumber -->
      <el-select
          style="width: 100px"
          v-model="conditionForm.vehicleStatus"
          class="search-input"
          prefix-icon="el-icon-search"
          size="small"
          placeholder="车辆状态"
          clearable
      >
        <el-option label="工作状态" value="in_service"></el-option>
        <el-option label="空闲状态" value="available"></el-option>
      </el-select>
      <el-button
          type="primary"
          size="small"
          icon="el-icon-circle-plus-outline"
          @click="onTableCondition"
      >查询
      </el-button
      >
      <el-button
          type="primary"
          size="small"
          icon="el-icon-circle-plus-outline"
          @click="onTableAddClick"
      >添加
      </el-button
      >
      <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          @click="onTopDeleteClick"
      >删除
      </el-button
      >
    </el-space>


    <!-- 添加/编辑权限的模态框 -->
    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="600px" center>
      <el-form :model="form" label-width="80px" center>

        <el-form-item label="车牌号">
          <el-input v-model="form.vehicleNumber"/>
        </el-form-item>
        <el-form-item label="车辆载重">
          <el-input v-model="form.capacity"/>
        </el-form-item>
        <el-form-item label="车辆状态">
          <el-select v-model="form.vehicleStatus" placeholder="请选择车辆状态">
            <el-option label="工作中" value="in_service"/>
            <el-option label="空闲状态" value="available"/>
          </el-select>
        </el-form-item>
        <el-form-item label="车辆类型">
          <el-select v-model="form.vehicleTypeId" placeholder="请选择车辆类型">
            <el-option label="小型" value="1"/>
            <el-option label="中型" value="2"/>
            <el-option label="大型" value="3"/>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="addOrUpdateAVehicle">确定</el-button>
            </span>
      </template>
    </el-dialog>

    <!--    表格-->
    <el-table
        :data="dataForTable"
        tooltip-effect="dark"
        :row-style="{ height: '65px' }"
        @selection-change="onTableSelectionChange"
    >
      <el-table-column
          type="selection"
          width="50"
          show-overflow-tooltip
          header-align="center"
          align="center"
      >
      </el-table-column>
      <el-table-column prop="vehicleNumber" label="车牌号" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="vehicleType.type" label="车辆类型" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="capacity" label="载重量" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="driver.name" label="司机姓名" show-overflow-tooltip>
      </el-table-column>
      <el-table-column  label="车辆所在地" show-overflow-tooltip width="200">
        <template #default="scope" >
          <el-tag type="success"
                  @click="showTheAddress(scope.row)"
          >({{scope.row.lag}},{{scope.row.lng}})</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="vehicleStatus"
          label="车辆状态"
          min-width="200"
          show-overflow-tooltip
      >
        <template #default="scope">
          <el-tag type="warning" v-if="scope.row.vehicleStatus === 'available'"
                  @click="clickSendToPoint(scope.row)"
          >空闲状态</el-tag>
          <el-tag type="success" v-if="scope.row.vehicleStatus === 'in_service'"
                  @click="clickSendToPoint(scope.row)"
          >工作中...</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          show-overflow-tooltip
          min-width="150"
          fixed="right"
      >
        <template #default="scope">
          <el-button
              type="warning"
              size="small"
              @click="onTableEditClick(scope.row)"
          >编辑
          </el-button>
          <el-button
              type="danger"
              size="small"
              @click="onTableDeleteClick(scope.row)"
          >删除
          </el-button>
          <el-button
              type="info"
              size="small"
              disabled
              v-if="scope.row.vehicleStatus === 'available'"
          >点击送达
          </el-button>
          <el-button
              type="success"
              size="small"
              @click="clickSendToPoint(scope.row)"
              v-if="scope.row.vehicleStatus === 'in_service'"
          >点击送达
          </el-button>
        </template>
      </el-table-column>
      <template v-slot:empty> 暂无数据</template>
    </el-table>
    <div class="table-pager">
      <el-pagination
          size="small"
          background
          layout="prev, pager, next"
          :total="50"
          class="mt-4"
      />
    </div>
  </div>
</template>

<script >
import axios from "axios";
import {reactive, onMounted, ref, watch, computed} from "vue";
import VehicleEdit from "./components/VehicleEdit.vue";
import ShowThrPosition from './components/showThrPosition.vue';
let showPopup =false;

function showMapPopup(){
  showPopup = true;
}



export default {
  name: "vehicle-management",
  components: {
    Map,
    VehicleEdit,
    ShowThrPosition,
  },
  setup() {
    const dataForTable = ref([]);
    const loading = ref(true)
    const form = ref({
      id: "",
      vehicleTypeId: "",
      vehicleStatus: "",
      capacity: "",
      vehicleNumber: "",
    })
    const emptiyForm = ref({
      id: "",
      vehicleTypeId: "",
      vehicleStatus: "",
      capacity: "",
      vehicleNumber: "",
    })
    const dialogTitle = ref("")
    const dialogFormVisible = ref(false)
    const dialogVisible = ref(false)
    const addrDetial = ref("")
    const filterForm = ref({
      vehicleNumber: "",
      vehicleStatus: "",
    })

    function onTableEditClick(row) {
      dialogTitle.value = "修改车辆"
      dialogFormVisible.value = true;
      form.value = row;
    }
    function  onTopDeleteClick(){

    }

    function onTableDeleteClick(row) {
      const res = axios({
        url: "/vehicle/vehicle/deleteById/" + row.id,
        method:"get"
      });
      asyncToFindAll();
    }

    function onTableAddClick() {
      dialogTitle.value = "新增车辆"
      dialogFormVisible.value = true;
    }

    function onTableSelectionChange(val) {

    }

    function onSizeChange() {
    }

    function onCurrentChange() {
    }

    //查询具体位置
    async function showTheAddress(row){
      //将变量拼起来
      latAndLng.value = row.lag + ',' +row.lng
      const res = await axios({
        url:"/vehicle/transport/getTheRightAddr/" + row.lag + "/" + row.lng,
        method:"get"
      });
      console.log(res.data.data);
      addrDetial.value = res.data.data;
      dialogVisible.value = true;
    }

    //多条件查询
    const conditionForm = ref({
      vehicleNumber : "",
      vehicleStatus : null,
    });
    const nullconditionForm = ref({
      vehicleNumber : "",
      vehicleStatus : null,
    })
    async function onTableCondition() {
      const res = await axios({
        url: "/vehicle/vehicle/findByCondition",
        method: "post",
        data: {
          "vehicleNumber": conditionForm.value.vehicleNumber,
          "vehicleStatus": conditionForm.value.vehicleStatus,
        }
      })
      console.log(res.data)
      dataForTable.value = res.data.data;
      conditionForm.value = nullconditionForm.value;
    }

    function addOrUpdateAVehicle(row) {
      if (dialogTitle.value === "新增车辆") {
        addAVehicle();
        dialogTitle.value = "";
        form.value = emptiyForm.value;
        dialogFormVisible.value = false;
      } else if (dialogTitle.value === "修改车辆") {
        updateAVehicle(row);
        dialogTitle.value = "";
        form.value = emptiyForm.value;
        dialogFormVisible.value = false;
      }
    }

    async function updateAVehicle(row) {
      console.log(row.value)
      const res = await axios({
        url: "/vehicle/vehicle/updateAMsg",
        method: "post",
        data: {
          "vehicle": {
            "id": form.value.id,
            "vehicleNumber": form.value.vehicleNumber,
            "vehicleStatus": form.value.vehicleStatus,
            "vehicleTypeId": form.value.vehicleTypeId,
            "capacity": form.value.capacity,
          }
        }
      });
      console.log(res.data);

    }

    async function addAVehicle() {
      console.log("add")
      const res = await axios({
        url: "/vehicle/vehicle/insertOne",
        method: "post",
        data: form.value
      });
      console.log(res);
      asyncToFindAll();
    }

    async function findAll() {
      loading.value = true;
      const res = await axios({
        url: "/vehicle/vehicle/findAll",
        method: "post",
      });
      console.log(res.data.data);
      dataForTable.value = res.data.data;
      console.log(dataForTable.value)
      loading.value = false;
    }

    async function selectById() {
      const res = await axios({
        url: "/vehicle/vehicle/selectById/3",
        method: "get",
      });
      console.log(res.data.data)
    }

    async function clickSendToPoint(row){
      const res = await axios({
        url:"/vehicle/vehicle/updateStatus/" + row.id,
        method:"get",
      })
      setTimeout(asyncToFindAll, 500);
    }


    const latAndLng = ref ('')
    function asyncToFindAll() {
      findAll();
    }
    findAll();
    return {
      dataForTable,
      filterForm,
      form,
      emptiyForm,
      conditionForm,
      dialogTitle,
      dialogFormVisible,
      dialogVisible,
      addrDetial,
      showPopup,
      ShowThrPosition,
      latAndLng,

      onTableEditClick,
      onTableDeleteClick,
      onTableAddClick,
      onTableSelectionChange,
      onSizeChange,
      onCurrentChange,
      onTableCondition,
      addOrUpdateAVehicle,
      asyncToFindAll,
      onTopDeleteClick,
      showTheAddress,
      clickSendToPoint,
      showMapPopup,
    };
  }
}

</script>

<style lang="scss" scoped>
.user-management-page {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  overflow: auto;
  position: relative;

  .table-pager {
    width: 100%;
    @include flex-row-center-center;
    padding: 20px 0;
    box-sizing: border-box;
  }
  #mapView{
    width: 50%;
    height: 50%;
    margin-left: 300px;
    margin-top: 200px;
  }
}

</style>